<script lang="ts">
export default {
    name: 'RecordList'
}
</script>

<script setup lang="ts">
import useRecordTable from '@/composables/system/record/useRecordTable';
import useRecord from '@/composables/system/record/useRecord';
import SysPagination from '@/components/SysPagination/index.vue';
// 表格列表
const { recordTable, listParam, searchBtn, resetBtn, sizeChange, currentChange, getRecordList } = useRecordTable()

const { delBtn, fmtBody } = useRecord(getRecordList)

</script>
<template>
    <el-main>
        <!-- 搜索栏 -->
        <el-form :inline="true" :model="listParam" class="search">
            <el-form-item label="请求方法">
                <el-input v-model="listParam.method" placeholder="请输入请求方法"></el-input>
            </el-form-item>
            <el-form-item label="请求路径">
                <el-input v-model="listParam.path" placeholder="请输入请求路径"></el-input>
            </el-form-item>
            <el-form-item label="结果状态码">
                <el-input v-model="listParam.status" placeholder="请输入结果状态码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" v-permission="['system:role:query']" @click="searchBtn">搜索
                </el-button>
                <el-button type="default" icon="Refresh" @click="resetBtn">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table :data="recordTable.list" border stripe>
            <el-table-column label="操作人">
                <template #default="scope">
                    {{ scope.row.user.username }}
                </template>
            </el-table-column>
            <el-table-column prop="created_at" label="日期" width="160"></el-table-column>
            <el-table-column prop="description" label="描述" width="100"></el-table-column>
            <el-table-column prop="method" label="请求方法" width="100"></el-table-column>
            <el-table-column prop="path" label="请求路径"></el-table-column>
            <el-table-column prop="status" label="状态码" width="80"></el-table-column>
            <el-table-column label="请求">
                <template #default="scope">
                    <el-popover placement="bottom" :width="320" trigger="click">
                        <div class="popover-box">
                            <pre>
{{ fmtBody(scope.row.body) }}
                            </pre>
                        </div>
                        <template #reference>
                            <el-icon>
                                <Warning />
                            </el-icon>
                        </template>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="响应">
                <template #default="scope">
                    <el-popover placement="bottom" :width="320" trigger="click">
                        <div class="popover-box">
                            <pre>
{{ fmtBody(scope.row.resp) }}
                            </pre>
                        </div>
                        <template #reference>
                            <el-icon>
                                <Warning />
                            </el-icon>
                        </template>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="100">
                <template #default="scope">
                    <el-button size="small" type="danger" v-permission="['system:record:delete']" icon="Delete"
                        @click="delBtn(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <SysPagination :listParam="listParam" @sizeChange="sizeChange" @currentChange="currentChange"></SysPagination>
    </el-main>
</template>
<style lang="scss" scoped>
.popover-box {
    background: #112435;
    color: #f08047;
    // height: 300px;
    width: 320px;
    overflow: auto;
}
</style>